<b>Assumed Knowledge</b>:
Using Layers
Using Keyframes
Adding Text
Drawing

Morphing is turning one shape into another over time.  To achieve this in flash we tween shapes and its attributes like, size, location and colour of shapes between two keyframes.  As a general rule its best to separate your shape-tweens with their own layers to keep things nice and simple.  Flash can tween numerous shapes on one layer as demonstrated in the example below.

Eddie.swf

For more complex shape-tweens or for more control, shape hints are used (you can see our tutorial on Shape Hints for more info) and allow you to control how the parts of the original shape morph into the new shape.

<b>Creating the Images</b><br>
To tween a shape, first create a new layer, name it and create a blank keyframe.  This will be the starting point for your shape-tween.  In this keyframe use the <b><a href="/tutorials/ba_drawg/tute_drawing.shtml">drawing tool</a></b> or the <b><a href="/tutorials/ba_addtx/tute_addingtext.shtml">text tool</a></b> to create your initial image.  Ensure that, what ever you create is broken apart.  To do this choose <b>Modify > Break Apart</b>.
</p>
<div class=notes>
	<p>
	<b>Note</b>: Flash can't shape-tween symbols, groups, text blocks, or images.
	</p>
</div>
<p>
Now create a second keyframe, and in it place your final image.  Again ensure that your text or drawing is broken apart.  At this point you can also add any changes to position and colour by choosing <b>Modify > Instance</b> and selecting the <b>Colour Effect</b> tab.


<b>Creating the Tween</b><br>
To create the tween we now select the first keyframe and open the Frame Properties box (<b>Modify > Frame</b>) and click on the <b>Tweening</b> Tab.  Next select Shape from the <b>Tweening pop-up</b> menu.  The dialog box should look like this.
</p>
<img src="tweendialog.gif" width=411 height=358 alt="" border="0">
<p>

Here you can select the <b>Blend Type</b>.  This determines how flash will perform the tween:  

<b>Distributive</b> is a smoother transition and a lot more irregular.
<b>Angular</b> maintains corners and straight lines during the transition.  

<div class=notes>
	<p>
	<b>Note</b>: If your shape doesn't have any corners flash will automatically perform Distributive tweening.
	<p>
</div>

You can also modify whether the animation is faster at the beginning of the tween, constant throughout or faster toward the end of the tween with the use of the <b>Easing Slider</b>.

Drag the slider towards Ease In for a slower beginning, or towards Ease Out for a slower end to the tween.  When the slider is in the middle (the default) the morph occurs at a constant rate.

Quick Reference : Shape Morphing

Create beginning and ending keyframes
Place text/drawing in first keyframe, break it down
Place text/drawing in second keyframe, break it down
Select first keyframe
Choose Modify > Frame
Select Tweening tab
Select Shape from the <b>Tweening pop-up</b> menu
Choose Distributive or Angular tweening
Indicate tween to Ease In, be constant or Ease Out using the slider.
Click OK
